<template>
    <div id="app">
     <header class="mui-bar mui-bar-nav">
         <h1 class="mui-title">迅科程序员前端班</h1>
     </header>
     <div class="content">
             <router-view></router-view>
     </div>
    
     <nav class="mui-bar mui-bar-tab">
         
         <router-link class="mui-tab-item " to="/index">
            <div @click="goHome">
             <span class="mui-icon mui-icon-home"></span>
             <span class="mui-tab-label">首页</span>
             </div>
         </router-link>
         <router-link class="mui-tab-item" to="/vip">
             <span class="mui-icon mui-icon-contact"></span>
             <span class="mui-tab-label">会员</span>
         </router-link>
         <router-link class="mui-tab-item" to="/shop">
             <span class="mui-icon mui-icon-extra mui-icon-extra-cart"></span>
             <span class="mui-tab-label">购物车</span>
         </router-link>
         <router-link class="mui-tab-item" to="/search">
             <span class="mui-icon mui-icon-search"></span>
             <span class="mui-tab-label">搜索</span>
         </router-link>
     </nav>
    </div>
</template>
<script>

	export default {
		
			name:'app',
			data(){
				return{
					
				}
            },methods:{
                goHome(){
                    this.$router.push('/shop')
                }
            },
            mounted(){
                console.log(this.$store.mutations)
            }
		
	}
</script>

<style scope>
 * { touch-action: pan-y; } 
#app{
    height: 100%;
}
html,body{
    height: 100%;
    overflow: hidden;
}

.content{
    margin-top: 40px;
    margin-bottom: 50px;
    height: calc(100% - 90px);
    overflow: scroll;

}
</style>